<!DOCTYPE html>
<html>
<head>
	<title>TweenJS: Spark Table</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/tweenjs.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js" type="text/javascript"></script>

	<script type="text/javascript" src="../_assets/libs/easeljs-NEXT.min.js"></script>
	<script type="text/javascript" src="../lib/tweenjs-NEXT.js"></script>
	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

<script id="editable">
	var eases = [createjs.Ease.none, createjs.Ease.linear, createjs.Ease.quadIn, createjs.Ease.getPowIn(2.5), createjs.Ease.cubicIn, createjs.Ease.quartIn, createjs.Ease.quintIn];

	function init() {
		canvas = document.getElementById("canvas1");
		stage = new createjs.Stage(canvas);

		var graph = new createjs.Shape();
		var g = graph.graphics;
		stage.addChild(graph);

		var w = canvas.width - 10;
		var h = canvas.height - 10;

		for (var j = 0, l = eases.length; j < l; j++) {
			g.beginFill(createjs.Graphics.getHSL(j / l * 360, 50, 50));
			var ease = eases[j];
			for (var i = 0; i < 100; i++) {
				var x = i / 100 * w + 5;
				var y = h - ease(i / 100) * h + 5;
				g.drawCircle(x, y, 3);
				g.closePath();
			}
		}
		stage.update();

	}
</script>
</head>

<body onload="init();">

<header class="TweenJS">
	<h1>Spark Table</h1>

	<p>You can edit this example to test different ease functions.</p>
</header>

<canvas id="canvas1" width="960" height="400"></canvas>

</body>
</html>

